<template>
  <div class="layout">
    <div class="shangm">
      <div class="shangm-title">
        <img class="logo" src="../assets/logo2.png" alt="logo" />
        <label>驰骋无界汽车俱乐部</label>
      </div>
      <div class="head-menu">
        <div ref="headMenuTipRef" class="head-menu-tip"></div>
        <div class="head-menu-item">
          <span
            class="head-menu-item-content"
            data-url="/"
            data-url2="/"
            @click="handleMenuClick($event)"
            >首页</span
          >
        </div>
        <div class="head-menu-item">
          <span
            class="head-menu-item-content"
            data-url="/carShop"
            data-url2="/carShop"
            @click="handleMenuClick($event)"
            >汽车店</span
          >
        </div>
        <div class="head-menu-item">
          <span
            class="head-menu-item-content"
            data-url="/LogLayout/Log"
            data-url2="/LogLayout"
            @click="handleMenuClick($event)"
            >日志管理</span
          >
        </div>
        <div class="head-menu-item">
          <span
            class="head-menu-item-content"
            data-url="/Dictionary/DictionaryType"
            data-url2="/Dictionary"
            @click="handleMenuClick($event)"
            >字典管理</span
          >
        </div>
      </div>
      <div class="login">
        <div class="login-dl">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="消息"
            placement="bottom"
          >
            <div @click="data.table = true" class="dl-tc">
              <i class="iconfont icon-tongzhi"></i>
            </div>
          </el-tooltip>
          <div class="gg"></div>
          <el-popover placement="bottom-end" trigger="hover" :width="100">
            <template #reference>
              <div id="account">
                <el-avatar
                  :size="30"
                  style="margin-right: 8px"
                  src="https://tse4-mm.cn.bing.net/th/id/OIP-C.y6rdSCGpxbfeb8Rd1CpSuwAAAA?rs=1&pid=ImgDetMain"
                />
              </div>
            </template>
            <template #default>
              <div class="user-operations">
                <div class="user-operations-item">
                  <i class="iconfont icon-yonghu"></i> 个人中心
                </div>
                <div class="user-operations-item" @click="loginOut">
                  <i class="iconfont icon-tuichu1"></i> 退出登录
                </div>
              </div>
            </template>
          </el-popover>
        </div>
      </div>
      <div :class="lg.nzdd"></div>
    </div>
    <div class="xiam">
      <router-view></router-view>
    </div>
    <!-- 右侧消息列表 -->
    <el-drawer
      v-model="data.table"
      title="消息通知"
      :destroy-on-close="true"
      style="background-color: #e6eefa"
      size="26%"
      class="high-z-index-drawer"
    >
      <el-scrollbar>
        <information />
      </el-scrollbar>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { getToken, removeToken } from "@/tools/cookieMgr";
import information from "@/components/information/index.vue";
import { useSignalR } from "@/services/signalr";

const headMenuTipRef = ref(null);

const lg = reactive({
  nzdd: "",
});

const data = reactive({
  table: false,
});

const router = useRouter();

var signalr = useSignalR();

onMounted(() => {
  signalr.startConnection(getToken() || "");
});

onUnmounted(() => {
  signalr.stopConnection();
});

const handleMenuClick = function (event: MouseEvent) {
  const node = event.target as HTMLElement;
  const tip = headMenuTipRef.value as unknown as HTMLElement;
  tip.style.transform = `translateX(${
    node.getBoundingClientRect().left - 270
  }px)`;
  setTimeout(() => {
    tip.style.width = 14 * node.innerText.length + "px";
  }, 500);
  router.push(node.getAttribute("data-url")!);
};

const loginOut = () => {
  ElMessageBox.confirm("确认退出吗？", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    removeToken();
    setTimeout(() => {
      router.push("/login");
    }, 1000);
  });
};

//消息

onMounted(() => {
  const path = router.currentRoute.value.path;
  const spans = document.querySelectorAll(".head-menu-item-content");
  const tip = headMenuTipRef.value as unknown as HTMLElement;
  for (let i = 0; i < spans.length; i++) {
    const url = spans[i].getAttribute("data-url2")!.toLowerCase();
    if (url !== "/" && url !== "" && path.toLowerCase().startsWith(url)) {
      tip.style.transform = `translateX(${
        spans[i].getBoundingClientRect().left - 270
      }px)`;
      tip.style.width = 14 * (spans[i] as HTMLElement).innerText.length + "px";
      break;
    }
  }
  tip.style.transition = "transform 0.5s linear";
});
</script>

<style scoped>
/* 上面 */
.layout {
  width: calc(100vw - 6px);
  height: calc(100vh - 4px);
  margin: 2px;
  border: 1px solid #ddd;
  border-radius: 8px 12px;
}
.shangm {
  width: 100%;
  height: 50px;
  display: flex;
  color: #fff;
  background-color: rgb(16, 132, 234);
  border-radius: 10px 10px 0px 0px;
}
.shangm-title {
  height: 100%;
  width: 260px;
}
.logo {
  width: 30px;
  padding: 12px;
}
.shangm-title label {
  position: absolute;
  top: 15px;
}
.shangm-menu {
  width: calc(60px - 16px);
  height: calc(100% - 24px);
  display: flex;
  padding: 12px 0px 0px 16px;
}
.shangm-menu div:hover {
  color: #000;
  background-color: #fff;
  border-radius: 6px;
}

.head-menu {
  display: flex;
  position: relative;
}
.head-menu-tip {
  position: absolute;
  width: 28px;
  height: 4px;
  top: 45px;
  left: 10px;
  border-radius: 4px;
  background-color: #fff;
}
.head-menu-item {
  display: flex;
  padding: 0 6px;
  align-items: center;
}
.head-menu-item-content {
  cursor: pointer;
  padding: 4px 4px;
  border-radius: 6px;
  font-size: 14px;
}
.head-menu-item-content:hover {
  position: relative;
  background-color: #fff;
  color: #000;
}
.user-operations {
  padding: 10px 0;
}
.user-operations-item {
  cursor: pointer;
  font-size: 20px;
}
.user-operations-item:hover {
  color: #000;
  background-color: #eee;
  border-radius: 6px;
}
.shangm-nzd {
  width: calc(80px - 16px);
  height: calc(100% - 24px);
  padding: 12px 8px 0px 8px;
  display: flex;
}
.shangm-nzd div:hover {
  color: #000;
  background-color: #fff;
  border-radius: 6px;
}
/* 下面 */
.xiam {
  width: calc(100% - 76px);
  height: calc(100% - 98px);
  padding: 24px 36px 24px 40px;
  background-color: #e6eefa;
  border-radius: 0px 0px 10px 10px;
}

.login {
  flex: 1;
  margin-right: 16px;
}
.login-dl {
  float: right;
  display: flex;
  margin-top: 12px;
}
.dl-tc {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  text-align: center;
  background-color: rgb(16, 132, 234);
}
.dl-tc:hover {
  background-color: rgb(13, 49, 178);
}
.gg {
  border: 1px solid #fff;
  margin: 0px 8px 0px 8px;
  height: 26px;
}

.hide {
  display: none;
}

.user-info ul {
  margin: 0;
  padding: 0;
  width: 100%;
  margin-top: 8px;
  padding: 4px;
}

.user-info ul li {
  list-style: none;
  width: calc(100% - 24px);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #eee;
  line-height: 35px;
  padding: 0px 8px 0px 8px;
  margin-top: -6px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 2px;
  font-size: 15px;
}

.user-info ul li:hover {
  background-color: #eee;
}

.user-info ul li i {
  margin-right: 8px;
}

.user-info {
  border: 1px solid #eee;
  z-index: 199;
  top: 50px;
  right: 10px;
  position: absolute;
  width: 150px;
  height: 98px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  color: #000;
}
.user {
  flex: 1;
  display: flex;
  justify-content: right;
  line-height: 60px;
  padding-right: 16px;
}

/* 消息 */
</style>
